<template>
  <view class="flex-row">
    <view class="first flex-row">
      <view class="table-label padding-lr-20 flex-row flex-center border">
        <text class="text-28 color-border">{{ title }}</text>
      </view>
      <view class="flex-item">
        <view v-for="(item,index) in labels" :key="index" class="td flex-row flex-center flex-item border padding-lr-30">
          <text class="text-28 color-border text-center">{{ item.name || item }}</text>
        </view>
      </view>
    </view>

    <view v-for="(vipInfo,index) in vipList" :key="index" class="flex-item text-center">
      <view v-for="(labelInfo,index) in labels" :key="index" class="td flex-row flex-center flex-item border">
        <image v-if="showRight" class="icon block" :src="def + (showData(vipInfo,labelInfo) ? right : error)" />
        <text v-else class="text-28 color-border">{{ showData(vipInfo,labelInfo) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
const left = '数据分析、获客小程序、系统模块、角色权限、成员管理、系统管理'
export default {
  name: 'TableBody',
  props: {
    title: {
      type: String,
      default: ''
    },
    labels: {
      type: Array,
      default: () => []
    },
    vipList: {
      type: Array,
      default: () => []
    },
    format: {
      type: String,
      default: ''
    },
    showRight: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      def: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/',
      right: 'icon_right.png',
      error: 'icon_error.png'
    }
  },
  computed: {
    showData() {
      return (vipInfo, labelInfo) => {
        if (this.format) {
          return this[this.format](vipInfo, labelInfo)
        }
        return true
      }
    },
    showModule() {
      return (vipInfo, labelInfo) => {
        if (labelInfo.right !== undefined) {
          return labelInfo.right
        }

        let data = []
        if (vipInfo.sysRoleMenus.length) data = vipInfo.sysRoleMenus[0].children
        const hasModules = this.formatCanUseModule(data)
        let right = hasModules.indexOf(labelInfo.id) > -1
        if (!vipInfo.price && left.indexOf(labelInfo.label.replaceAll(' ', '')) > -1) {
          right = false
        }
        return right
      }
    },
    showNumber() {
      return (vipInfo, labelInfo) => {
        const newMenus = vipInfo.newMenus
        if (newMenus !== undefined) {
          for (let i = 0; i < newMenus.length; i++) {
            if (newMenus[i].substring(0, newMenus[i].indexOf('-')) === labelInfo) {
              return newMenus[i].substring(newMenus[i].indexOf('-') + 1, newMenus[i].length)
            }
          }
        }
        return '无限制'
      }
    },
    showServe() {
      return (vipInfo, labelInfo) => {
        const vipServiceTagList = vipInfo.vipServiceTagList
        if (vipServiceTagList !== undefined) {
          for (let i = 0; i < vipServiceTagList.length; i++) {
            if (vipServiceTagList[i].name === labelInfo && vipServiceTagList[i].active) {
              return true
            }
          }
        }
        return false
      }
    }
  },
  methods: {
    // 格式化可用功能
    formatCanUseModule(data) {
      const arr = []
      data.forEach(item => {
        item.children.forEach(subItem => {
          arr.push(subItem.id)
        })
        arr.push(item.id)
      })
      return arr
    }
  }
}
</script>

<style scoped>
.first{
  flex: 2;
}
.table-label{
  width:68rpx;
}
.border{
  border-right:2rpx solid #393F47;
  border-bottom:2rpx solid #393F47;
}
.td{
  height:90rpx;
}
.icon{
  width:40rpx;
  height:40rpx;
}
</style>
